---
type: tutorial
title: 첫 번째 Markdown 블로그 게시물 작성
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 사이트에 Markdown 페이지 추가
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 `.astro` 파일을 사용하여 페이지를 만들었으므로 `.md` 파일을 사용하여 블로그 게시물을 작성할 차례입니다!

<PreCheck>
  - 새 폴더를 만들고 새 게시물 작성
  - Markdown 콘텐츠 작성
  - 블로그 페이지의 블로그 게시물에 대한 링크
</PreCheck>

## 첫 번째 `.md` 파일 만들기

<Steps>
1. `src/pages/posts/`에 새 디렉터리를 만듭니다.

2. 새 `/posts/` 폴더 안에 새 (빈) `post-1.md` 파일을 추가하세요.

3. 기존 미리보기 URL 끝에 `/posts/post-1`을 추가하여 브라우저 미리보기에서 이 페이지를 찾으세요. (예: `http://localhost:4321/posts/post-1`)

4. 대신 `/posts/post-2`를 보려면 브라우저 미리보기 URL을 변경하세요. (아직 생성하지 않은 페이지입니다.)

    "빈" 페이지를 미리 볼 때와 존재하지 않는 페이지를 미리 볼 때 다른 출력이 표시됩니다. 이는 향후 문제를 해결하는 데 도움이 될 것입니다.
</Steps>

## Markdown 콘텐츠 작성

<Steps>
1. `post-1.md`에 다음 코드를 복사하거나 입력하세요.

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'My First Blog Post'
    pubDate: 2022-07-01
    description: 'This is the first post of my new Astro blog.'
    author: 'Astro Learner'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png' 
        alt: 'The full Astro logo.'
    tags: ["astro", "blogging", "learning in public"]
    ---
    # My First Blog Post

    Published on: 2022-07-01

    Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

    ## What I've accomplished

    1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.

    2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.

    3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!

    ## What's next

    I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
    ```

2. `http://localhost:4321/posts/post-1`에서 브라우저 미리보기를 다시 확인하세요. 이제 이 페이지의 콘텐츠를 볼 수 있습니다. 아직 형식이 제대로 지정되지 않았을 수 있지만 걱정하지 마세요. 나중에 튜토리얼에서 업데이트할 예정입니다!

3. 브라우저의 개발자 도구를 사용하여 이 페이지를 검사하세요. HTML 요소를 입력하지 않았더라도 Markdown이 HTML로 변환되었습니다. 제목, 단락, 목록 항목 등의 요소를 볼 수 있습니다.
</Steps>

:::note
코드 펜스 내부의 파일 상단에 있는 정보를 프런트매터라고 합니다. 태그와 게시물 이미지를 포함한 이 데이터는 Astro가 사용할 수 있는 게시물 *에 관한* 정보입니다. 페이지에 자동으로 표시되지는 않지만 나중에 사이트를 개선하기 위해 튜토리얼에서 액세스하게 됩니다.
:::

## 게시물 링크

<Steps>
1. `src/pages/blog.astro`에 앵커 태그가 있는 첫 번째 게시물에 링크하세요.

    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/blog/">Blog</a>

        <h1>My Astro Learning Blog</h1>
        <p>This is where I will post about my journey learning Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Post 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. 이제 `src/pages/posts/`에 `post-2.md`와 `post-3.md`라는 두 개의 파일을 더 추가합니다. 다음은 파일에 복사하여 붙여넣거나 직접 만들 수 있는 몇 가지 샘플 코드입니다!

    ```md title="src/pages/posts/post-2.md"
    ---
    title: My Second Blog Post
    author: Astro Learner
    description: "After learning some Astro, I couldn't stop!"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Thumbnail of Astro arcs."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "learning in public", "successes"]
    ---
    After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: My Third Blog Post
    author: Astro Learner
    description: "I had some challenges, but asking in the community really helped!"
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Thumbnail of Astro rays."
    pubDate: 2022-07-15
    tags: ["astro", "learning in public", "setbacks", "community"]
    ---
    It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!
    ```

3. 다음 새 게시물에 대한 링크를 추가하세요.

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/blog/">Blog</a>

        <h1>My Astro Learning Blog</h1>
        <p>This is where I will post about my journey learning Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Post 1</a></li>
          <li><a href="/posts/post-2/">Post 2</a></li>
          <li><a href="/posts/post-3/">Post 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. 브라우저 미리보기를 확인하고 다음 사항을 확인하세요.

    게시물 1, 게시물 2, 게시물 3에 대한 모든 링크는 사이트에서 작동하는 페이지로 연결됩니다. (실수를 발견했다면 `blog.astro`에 있는 링크나 Markdown 파일 이름을 확인하세요.)
</Steps>

<Box icon="question-mark">
### 지식을 테스트해보세요

1. Markdown (`.md`) 파일의 콘텐츠는 다음으로 변환됩니다.
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 블로그 게시물을 위해 `src/pages/`에 새 폴더를 만들 수 있습니다.
- [ ] 새로운 Markdown (`.md`) 블로그 게시물 파일을 만들 수 있습니다.
- [ ] Markdown이 Astro와 마찬가지로 내 브라우저에서 HTML을 생성하는 또 다른 언어라는 것을 알고 있습니다.
</Checklist>
</Box>

### 참고 자료

- [Markdown Guide의 Markdown 치트 시트](https://www.markdownguide.org/cheat-sheet/)  <Badge>외부 링크</Badge>

- [브라우저 개발자 도구란 무엇입니까? MDN](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)  <Badge>외부 링크</Badge>

- [YAML 프런트매터](https://assemble.io/docs/YAML-front-matter.html)  <Badge>외부 링크</Badge>
